<script type="text/javascript" src="../../../public/static/jquery.js"></script>
<style type="text/css">
    .success input[type="text"]{
        border: 1px solid green;
    }
    .success .validMessage{
        display: none;
    }
    .error input[type="text"]{
        border: 1px solid red;
    }
    .error .validMessage{
        display: inline;
    }
form.detail{
    position: fixed;
    right:10px;
    bottom: 10px;
    padding:10px;
    width: 300px;
    height: 200px;
    border:1px solid #ccc;
    box-sizing: border-box;
    margin:10px auto;
    border-radius:10px;
    background: #efefef;
}
    input[type="text"],input[type="password"]{
        border: 1px solid #000000;
        padding: 5px;
        height: 14px;
        border-radius: 5px;
    }
    form.detail>div{
        display: flex;
        flex-grow:row nowrap;
    }

</style>
<form method="post" class="detail" action="add">
    <div class="row">
        <div>用户名</div>
        <input class="txt" type="text" id="username" name="username" />
        <div>请输入用户名</div>
    </div>
    <div>
        <div>密码</div>
        <input class="txt" type="text" name="password" />
        <label class="validMessage">请输入密码</label>
    </div>
    <div>
        <input type="submit" value="重置" />
        <input type="reset" value="提交" />
    </div>
</form>
<script type="text/javascript" src="../../../public/static/jquery.js"></script>
<script type="text/javascript">
    $("#username").blur(function () {
       var userElem= this;
       var val=userElem.value;
       if(val){
           $(this).css({
               border:"1px solid green",
               color:"green"
           });
           $(this).next("div").hide();
       }else {
           $(this).css("border","1px solid red");
           $(this).next("div").show();
       }
    });
    $("input[name='password']").blur(function () {
        var userElem= this;
        var val=userElem.value;
        if(val){
            $(this).parent().addClass("success").removeClass("error");
        }else {
            $(this).parent().addClass("error").removeClass("success");
        }
    });
</script>